#{extends 'master.html' /}
#{set 'title'}
DigitalBand.ru - &{'Product.list.title'}
#{/set}
#{set isCatalogActive:'active' /}
#{set 'moreStyles'}
<link type="text/css" rel="stylesheet" href="@{'/public/javascripts/plugins/carousel/tango/skin.css'}"/>
#{/set}
#{set 'moreScripts'}
<script type="text/javascript" src="@{'/public/javascripts/plugins/carousel/jquery.jcarousel.min.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/plugins/jquery.lazyload.mini.js'}"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {

        $("#product_list .lazy-image").lazyload({
            effect:"fadeIn",
            placeholder:"@{Product.defaultImage(115, 90, 'png')}"
        });
        $(".brand_filter .lazy-image").lazyload({
            effect:"fadeIn",
            placeholder:"@{Product.defaultImage(85, 40, 'png')}"
        });
    });
</script>
#{/set}
<noscript>
    <style>
        .brand_filter {
            margin-top: 20px;
            margin-left: 40px;
            height: 40px;
            display: inline-block;
        }

        .bcontainer {
            height: 115px;
            overflow: auto;
        }

        .lazy-image {
            display: none;
        }
    </style>
</noscript>
<div>
#{if q != null}
    <h3 class="categoryTitle">${q}</h3>
    <div class="clear"></div>
#{/if}
</div>
<div id="product_list" class="plist">
#{if productList.pageCount > 1}
    <div class="pager">
        #{pager_deprecated
        model:productList,
        action:'Product.search',
        map:params.allSimple() /}
    </div>
#{/if}
    <ol>
    #{list items:productList.items, as:'product' }
        <li class="${product_parity}">
            <div class="pentry">
                <div class="pimage">
                    <a href="@{Product.display(product.id)}" title="${product.title}"
                       class="image-link">
                        #{if product.hasPicture}
                            <img class="lazy-image" src="@{Product.defaultImage(115, 90, 'png')}"
                                 original="@{Product.productImage(product.id, 1, 115,90, 'png')}" alt=""
                                 class="product-image"/>
                        #{/if}
                        #{else}
                            <img class="default-image" src="@{Product.defaultImage(115, 90, 'png')}" alt=""
                                 class="product-image"/>
                        #{/else}
                        <noscript>
                            <img src="@{Product.productImage(product.id, 1, 115, 90, 'png')}" alt=""
                                 class="product-image"/>
                        </noscript>
                    </a>

                </div>
                #{if product.price > 0}
                    <div class="price">
                        <h4>${product.price.formatPrice("ru-RU")}</h4>

                        #{form @ShoppingCart.add(product.id)}
                            <input type="submit" class="addtocart" value="&{'Product.list.addtocart'}"/>
                        #{/form}
                    </div>
                #{/if}
                <header>
                    <h2 class="entry-title"><a href="@{Product.display(product.id)}"
                                               title="${product.title}">${product.title}</a>
                    </h2>
                </header>

                <span class="list_description">${product.shortDescription.raw()}</span>


            </div>
        </li>
    #{/list}
    </ol>
#{if productList.pageCount > 1}
    <div class="pager">
        #{pager_deprecated
        model:productList,
        action:'Product.search',
        map:params.allSimple() /}
    </div>
#{/if}
</div>